<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <!--
      水平居中:
      1.行内标签 行内-块级标签   text-align: center;
      2.块级标签  margin: 0px auto;
      垂直居中:
      直接设置 line-height的高度为height的高度
    -->
    <style>
        .one{
            background-color: red;
            width: 200px;
            height: 300px;
            line-height: 300px;
            text-align: center;
        }

        span{
            background-color: yellow;
        }

        .two{
          width: 120px;
          background-color: yellow;
          text-align: center;
          margin: 0px auto;
        }
    </style>
</head>
<body>
<!--块级标签-->
   <div class="one">
      <!--行内标签-->
       <span>行内标签</span>
       <!--行内块级标签-->
       <!--<button>哈哈哈哈</button>-->
       <!--块级标签-->
       <!--<div class="two">111111</div>-->
   </div>
</body>
</html>